<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就诊信息管理</title>
    <link href="../layui/css/layui.css" rel="stylesheet" />
    <link href="../css/login.css" rel="stylesheet" />
</head>
<body>
<form class="layui-form">
<div class="layui-form-item">
    <div class="layui-input-block">
      <!--  <select name="dp" id="dp" lay-verify="required" lay-filter="xmFilter">
            <option value=""></option>
        </select>-->
        <div class="layui-form-item">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline">
                <input type="text" name="id"  id="uid" placeholder="请输入id" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">名字</label>
            <div class="layui-input-inline">
                <input type="text" name="name"  id="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
            <button lay-submit class="layui-btn layui-btn-radius layui-btn-normal"  lay-filter="formDemo">查找</button>
        </div>
    </div>
</div>
</form>
<!--表格-->
<div class="">
<table class="layui-hide" id="test" lay-filter='test'></table>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../layui/layui.js"></script>
<script>


/*加载模块*/
    layui.use(['form','layer','table','laypage'],function(){
        var layer = layui.layer //弹层
        var form = layui.form,
            upload=layui.upload,
            $=layui.$,
            table=layui.table;

        // $("#zw").click(function () {
        //     alert("===")
        // });

        //绑定按钮的当前行事件
        table.on('tool(test)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
           // console.log(layEvent)
            console.log(data)
            console.log(layEvent)
            if (layEvent == 'kswz'){
                //开始问诊  弹出问诊层
                layer.open({
                    type:2, //弹出层类型
                    title:'开始问诊',
                    content:"showPatient.html",
                    area:['600px','500px'],
                    success:function (layero,index) {
                        var body =layer.getChildFrame('body',index);
                        //获取showPatient中id属性 id选择器选择 进行数据回显
                            body.find("#name").val(obj.data.name);
                            body.find("#idCard").val(obj.data.idCard);
                            //attr加属性
                            body.find("input[name='sex'][value=1]").attr('checked',obj.data.sex==1?true:false);
                            body.find("input[name='sex'][value=2]").attr('checked',obj.data.sex==2?true:false);
                            //下拉列表回显
                            body.find("#birthday").val(obj.data.birthday);
                            body.find("#address").val(obj.data.address);
                    }
                })
            }else if (layEvent=='ckxq'){
                //查看详情
                layer.open({
                    type:2,
                    title:'查看详情',
                    content:"viewDetails.html",
                    area:['600px','200px']
                })
            }else {
                //不存在
                alert("不存在")
                console.log("不存在")
            }
        })


       // 表格外层渲染到网页
        table.render({
            elem: '#test'       /*绑定要把数据生成在哪里*/
            ,url: 'http://localhost:8090/pat/selectPat'/*获取数据的地址 请求地址*/
            ,page:true
            ,limit:7
            ,request:{
            }
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,method:'post'
            ,response:{
                statusName: 'code' ,// 对应 code
                msgName: 'msg' , // 对应 msg
                dataName: 'data' // 对应 data
            }
            //parseData对数据进行重新映射    res就是后台返回的数据
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "mgs":res.mgs,
                    "code": res.code ==  200 ? 0 : res.code, //解析接口状态
                    "data": res.data //解析数据列表
                };
            }
            ,cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', width:70, title: 'id'},
                {field:'name', width:100, title: '病人姓名'}
                //templet :function (d)原始数据
                ,{ width:70, title: '性别',templet:function (d) {
                        return d.sex==1?'女':'男';
                    }}
                ,{field:'address', width:150, align:'center', title: '家庭地址'}
                ,{field:'phone', width:100, title: '联系方式'}
                ,{field:'createdTime', width:150, title: '创建时间',sort:true}  //sort:true 排序
                ,{field:'idMedicare', width:120, title: '医保卡号'}
                ,{field:'idCard', width:120, title: '身份证号'}
                ,{field:'updatedTime', width:100, title: '修改时间'}
                ,{title: "操作",width:180,align:"center",templet:function () {
                    //lay-event给按钮添加事件
                    var btn= "<button id='wz'  type=\"button\" class=\"layui-btn layui-btn-xs\" lay-event='kswz'>开始问诊</button>";
                     btn+="<button type=\"button\" class=\"layui-btn layui-btn-xs\" lay-event='ckxq'>查看详情</button>";
                        return btn;
                    }}
            ]]
        });


        /*监听提交*/
        form.on('submit(formDemo)', function(){
            table.render({
                elem: '#test'
                ,url: 'http://localhost:8090/pat/selectPat'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,method:'post'
                ,where:{
                    "id":$("#uid").val(),
                    "name":$("#name").val()
                }
                ,response:{
                    statusName: 'code' ,// 对应 code
                    msgName: 'msg' , // 对应 msg
                    dataName: 'data' // 对应 data
                }
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code ==  200 ? 0 : res.code, //解析接口状态
                        "data": res.data //解析数据列表
                    };
                }
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field:'id', width:70, title: 'id'},
                    {field:'name', width:100, title: '病人姓名'}
                    //templet :function (d)原始数据
                    ,{ width:70, title: '性别',templet:function (d) {
                            return d.sex==1?'女':'男';
                        }}
                    ,{field:'address', width:150, align:'center', title: '家庭地址'}
                    ,{field:'phone', width:100, title: '联系方式'}
                    ,{field:'createdTime', width:150, title: '创建时间',sort:true}  //sort:true 排序
                    ,{field:'idMedicare', width:120, title: '医保卡号'}
                    ,{field:'idCard', width:120, title: '身份证号'}
                    ,{field:'updatedTime', width:100, title: '修改时间'}
                    ,{title: "操作",width:180,align:"center",templet:function () {
                            var btn= "<button type=\"button\" class=\"layui-btn layui-btn-xs\" lay-event='kswz'>开始问诊</button>";
                            btn+=  " <button type=\"button\" class=\"layui-btn layui-btn-xs\" lay-event='ckxq'>查看详情</button>";
                            return btn;
                        }}
                ]]
            });
            return false;
        })
    });


 /*   laypage.render({
        elem: 'pageDemo' //分页容器的id
        ,count: 1000 //数据总数
        ,limit: 10 //每页显示的数据条数
        ,skin: '#1E9FFF' //自定义选中色值
        //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
        ,jump: function(obj, first){
            if(!first){
                layer.msg('第'+ obj.curr +'页', {offset: 'b'});
            }
        }
    });*/

</script>

</body>
</html>